<style lang="scss" scoped>
.test{
[cloak]{
    display: none;
}
}
</style>

<template>
    <div class="test">
        <ul>
            <li v-for="(item,index) in sortStudents" :key="index">{{item.name}}--{{item.age}}</li>
        </ul>
        <hr>
        <ul>
            <li v-for="(item,index) in list" :key="index">{{item}}</li>
        </ul>
        <div>文本信息：{{message}}</div>
        <input v-model="message"/>
        <input v-model.lazy="message" />
        <input v-model.number="message"/>
        <input v-model.trim="message">

        <div>
            <input type="checkbox" id='a'  value='a' v-model="hobby" />
            <label for="a">a</label>
            <input type="checkbox" id='b'  value='b' v-model="hobby" />
            <label for="b">b</label>
            <input type="checkbox" id='c'  value='c' v-model="hobby" />
            <label for="c">c</label>
        </div>
        {{hobby}}
        <div>
            <input type="radio"  id="boy" value="boy" v-model="sex">
            <label for="boy">boy</label>
            <input type="radio"  id="girl" value="girl" v-model="sex">
            <label for="girl">girl</label>
        </div>
        {{sex}}
    </div>
</template>

<script>
export default {
    data(){
        return {
            list:[20,23,18,65,32,19,5,56,41],
            students:[
                {name:'jspang',age:32},
                {name:'Panda',age:30},
                {name:'PanPaN',age:21},
                {name:'King',age:45}
            ],
            message:"你好",
            hobby:['a','b'],
            sex:'boy',
            color:'green'
        }
    },
    methods: {
        sortNumber(a,b){
            return a-b
        },
        sortItem(a,b){
            let x=a['age'];
            let y=b['age'];
            return x-y
        }
    },
    mounted() {
        console.log(this.list)
        this.list.sort()
        console.log(this.list)
    },
    computed: {
        sortList(){
            return this.list.sort(this.sortNumber)
        },
        sortStudents(){
            return this.students.sort(this.sortItem)
        }
    },
}
</script>


